<template>
  <view>
    <!-- 信息模块 -->
    <view class="container-box" v-for="item in list" :key="item.id">
      <!-- 头部标题 -->
      <view class="title-top">
        <text class="title">{{item.topTitle}} </text>
        <view class="logo">
          <image :src="item.logoImg" mode=""></image>
          <text class="title-name">{{item.titleName}}</text>
        </view>
      </view>
      <!-- 视频区域 -->
      <view class="_video">
        <video :src="item.videoSrc" controls></video>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"ClassRoom",
    data() {
      return {
        list:[]
      };
    },
    created(){
      this.getTipList()
    },
   methods:{
     async getTipList(){
       const {data:res} = await uni.$http.get("/life")
       if(res.code !== 200) uni.$showMsg('数据获取失败')
       this.list=res.data
      }
   }
  }
</script>

<style lang="scss">
.container-box{
  padding: 10px;
  .title-top{
    display: flex;
    flex-direction: column;
    .title{
      padding-bottom: 5px;
      font-size: 16px;
    }
    .logo{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      image{
        width: 25px;
        height: 25px;
        border-radius: 100%;
      }
      .title-name{
        font-size: 14px;
        margin-left: 10px;
        color: gray;
      }
    }
  }
  ._video{
    width: 100%;
    height:200px ;
    padding-bottom: 20px;
    border-bottom: 1px solid #efefef;
    video{
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}
</style>